<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <style>
    .cell-resizing {
      cursor: col-resize
    }
  </style>

  <table border="1" cellspacing="0" cellpadding="20" id="testTable">
    <colgroup>
      <col name="th_1" width="100">
      <col name="th_2" width="100">
      <col name="th_3" width="200">
    </colgroup>

    <thead>
      <tr style="user-select: none;">
        <th class="th_1">名称</th>
        <th class="th_2">价格</th>
        <th class="th_3">季节</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>香蕉</td>
        <td>15</td>
        <td>xx</td>
      </tr>

      <tr>
        <td>西瓜</td>
        <td>5</td>
        <td>夏季</td>
      </tr>
    </tbody>

    <tfoot>
      <td>A级</td>
      <td>--</td>
      <td>C级</td>
    </tfoot>
  </table>

  <script>
    // 正在调整单元格尺寸的样式名
    const RESIZE_CLASS = 'cell-resizing'

    // 检测是否需要保留样式名的鼠标移动偏移量
    const NOT_TOO_MUCH_POSITION = 1

    // 调整的倍率
    const RESIZE_RATIO = 1

    // 所有表头单元格的宽度
    let allHeadCellWidthList = []

    const getHeadCellWidthList = (headList) => {
      return headList.map(i => i.clientWidth)
    }
    
    
    const heads = document.getElementById('testTable')
    const tbody = heads.getElementsByTagName('tbody')[0]

    const allCellWidthControlCol = Array.from(heads.children.item(0).children)
    const allTableHeadList = Array.from(heads.children.item(1).children[0].children)

    // 通过坐标判断是否添加调整样式
    const addResizeClassByPosition = (headCell, event) => {
      const parentNodeOffsetX = headCell.offsetParent.offsetLeft
      const currentOffsetEndX = headCell.offsetLeft + headCell.offsetWidth
      const offset = (parentNodeOffsetX + currentOffsetEndX) - event.clientX

      if (offset < 0 || offset > NOT_TOO_MUCH_POSITION) {
        // 单元格左侧移入时不添加样式
        return
      }

      headCell.enterPointX = event.clientX // 记录鼠标进入的X轴坐标
      headCell.classList.add(RESIZE_CLASS)
    }

    allTableHeadList.forEach(tableHeadCell => {
      console.dir(tableHeadCell);

      // // 鼠标移入
      // tableHeadCell.addEventListener('mouseenter', (e) => {
      //   console.log(10086001, 'mouseenter', { e, tableHeadCell });
      //   const parentNodeOffsetX = tableHeadCell.offsetParent.offsetLeft
      //   const currentOffsetEndX = tableHeadCell.offsetLeft + tableHeadCell.offsetWidth
      //   const offset = (parentNodeOffsetX + currentOffsetEndX) - e.clientX
      //   console.log(10086001, 'mouseenter', { parentNodeOffsetX, currentOffsetEndX, offset });

      //   if (offset < 0 || offset > NOT_TOO_MUCH_POSITION) {
      //     // 单元格左侧移入时不添加样式
      //     return
      //   }

      //   tableHeadCell.enterPointX = e.clientX // 记录鼠标进入的X轴坐标
      //   tableHeadCell.classList.add(RESIZE_CLASS)
      // })

      // 鼠标移出
      // tableHeadCell.addEventListener('mouseout', (e) => {
      //   console.log(10086002, 'mouseout', { e });
      //   if(tableHeadCell.startCellResize !== 1) {
      //     tableHeadCell.classList.remove(RESIZE_CLASS)
      //   }
      // })

      // 鼠标移动
      tableHeadCell.addEventListener('mousemove', (e) => {
        addResizeClassByPosition(tableHeadCell, e)

        console.log(10010, {
          offsetX: e.offsetX,
          offsetWidth: tableHeadCell.offsetWidth
        })
        console.log(10086003, 'mousemove', tableHeadCell.cellIndex, { e });
        const offset = tableHeadCell.enterPointX - e.clientX
        if (offset < 0) {
          // 进入此判断，意味着鼠标在单元格的左侧按下，因此不予处理
          return
        }
        const notMoveTooMuch = offset <= NOT_TOO_MUCH_POSITION

        console.log({
          enterPointX: tableHeadCell.enterPointX,
          cellResizeStartX: tableHeadCell.cellResizeStartX,
          clientX: e.clientX,
          value: offset,
          notMoveTooMuch
        })

        if(tableHeadCell.startCellResize !== 1 && !notMoveTooMuch) {
          tableHeadCell.classList.remove(RESIZE_CLASS)
          return
        }

        if(tableHeadCell.startCellResize === 1) {

          const currentCellWidthControl = allCellWidthControlCol[tableHeadCell.cellIndex]
          
          // const diff = (tableHeadCell.cellResizeStartX - e.clientX) / RESIZE_RATIO
          const diff = (e.clientX - tableHeadCell.cellResizeStartX) / RESIZE_RATIO

          // const finnalWidth = Number(currentCellWidthControl.width) + diff
          const finnalWidth = Number(allHeadCellWidthList[tableHeadCell.cellIndex]) + diff


          console.log(10086004, diff, finnalWidth, {
            allHeadCellWidthList,
            cellIndex: tableHeadCell.cellIndex,
            e,
            tableHeadCell,
            cellResizeStartX: tableHeadCell.cellResizeStartX,
            clientX: e.clientX
          })
          if (finnalWidth <= 0) {
            return
          }


          let newWidth = 0
          allHeadCellWidthList.forEach((i, idx) => {
            if(idx === tableHeadCell.cellIndex) {
              newWidth += finnalWidth
            } else {
              newWidth += i
            }
          })
          heads.style.width = `${newWidth}px`
          tbody.style.width = `${newWidth}px`

          // const newTableWidth = heads.clientWidth + diff
          const newTableWidth = heads.clientWidth + diff
          // heads.style.width = `${newTableWidth}px`
          heads.setAttribute('wid', newTableWidth)
          heads.setAttribute('wid2', heads.clientWidth)
          heads.setAttribute('wid3', diff)

          allHeadCellWidthList.forEach((cellWidth, index) => {
            allCellWidthControlCol[index].width = cellWidth
            // allCellWidthControlCol[index].width = 100
          })

          currentCellWidthControl.width = finnalWidth
        }
      })
      
      // 按下鼠标
      tableHeadCell.addEventListener('mousedown', (e) => {
        // const offset = tableHeadCell.enterPointX - e.clientX
        // if (offset < 0) {
        //   // 进入此判断，意味着鼠标在单元格的左侧按下，因此不予处理
        //   return
        // }
        // const notMoveTooMuch = offset <= NOT_TOO_MUCH_POSITION
        // if (!notMoveTooMuch) {
        //   return
        // }

        if(!tableHeadCell.classList.contains(RESIZE_CLASS)) {
          return
        }

        // 鼠标按下时更新所有的单元格宽度
        allHeadCellWidthList = getHeadCellWidthList(allTableHeadList)

        console.log(10086005, 'mousedown', { e });
        tableHeadCell.startCellResize = 1 // 标记为已开始调整单元格宽度
        tableHeadCell.cellResizeStartX = e.clientX // 记录开始调整时的宽度
      })

      // 松开鼠标
      tableHeadCell.addEventListener('mouseup', (e) => {
        // 鼠标松开时移除记录的单元格宽度
        // allHeadCellWidthList = []

        console.log(10086006, 'mouseup', { e });
        tableHeadCell.startCellResize = 0 // 取消标记
      })
    })
    
    
    console.log(10086, {
      allTableHeadList,
      heads,
      allHeadCellWidthList: getHeadCellWidthList(allTableHeadList)
    })
  </script>
</body>
</html>